<template>
	<view class="store-cart">
		<view class="shopcart-content" v-if="goodsListLength > 0">
			<view class="module-shop">
				<view
					class="shop-content"
					v-for="(item, index) in storeGoodsList"
					:key="index"
				>
					<view class="shop-header">
						<checkbox
							:checked="item.checked"
							@tap="handleShopCheck($event, shopCartIndex)"
						/>
						全选
						<text class="btn-delete" type="danger" @click="handleDelete">
							删除
						</text>
					</view>
					<view class="shop-product">
						<view
							class="item"
							v-for="(product, productindex) in item.product"
							:key="product.id"
						>
							<checkbox
								:checked="product.checked"
								@tap="
									handleProductCheck(
										$event,
										product,
										productindex,
										shopCartIndex,
									)
								"
							/>
							<view class="product-content">
								<image
									class="media-object"
									src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/108272/8/9220/359926/5e71e059Ef5f8268a/258098ba96ce9cd2.jpg!q80.dpg.webp"
									mode="widthFix"
								></image>
								<view class="media-content">
									<view class="media-title">{{ product.title }}</view>

									<view class="item-price">
										<span class="price-count">￥{{ product.price }}</span>
										<numberBox
											class="item-number"
											:min="1"
											:value="product.count"
											:index="shopCartIndex"
											:pIndex="productindex"
											@change="handleNumber"
										></numberBox>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车无商品显示 -->
		<view class="module-none" v-else>购物车空空如也</view>
		<!-- 购物车无商品显示-end -->

		<!-- <view class="module-line" style="height: 50px; background: #fff;"></view> -->
	</view>
</template>

<script>
import numberBox from '@/pages/components/number-box/number-box.vue';
export default {
	components: {
		numberBox,
	},
	props: {
		shopId: {
			type: Number,
		},
		shopCartIndex: {
			type: Number,
		},
		storeGoodsList: {
			type: Array,
		},
		storeAllTotal: {
			type: Object,
		},
	},
	data() {
		return {};
	},
	computed: {
		goodsList() {
			return this.$store.getters.goodsList;
		},
		goodsListLength() {
			return this.$store.getters.goodsListLength;
		},
		allTotal() {
			return this.$store.getters.allTotal;
		},
	},
	created() {},
	methods: {
		// 商铺勾选按钮
		handleShopCheck(e, index) {
			const { checked } = this.goodsList[index];
			this.$store.commit('shopCheck', {
				index: index,
				key: 'checked',
				value: !checked,
			});
		},
		// 商品勾选按钮
		handleProductCheck(e, item, productIndex, index) {
			this.$store.commit('productCheck', {
				productIndex: productIndex,
				index: index,
				key: 'checked',
				value: !item.checked,
			});
		},
		handleNumber(e) {
			this.$store.commit('productCheck', {
				productIndex: e.pIndex,
				index: e.index,
				key: 'count',
				value: e.value,
			});
			this.$store.commit('productCheck', {
				productIndex: e.pIndex,
				index: e.index,
				key: 'checked',
				value: true,
			});
		},
		handleDelete() {
			if (this.storeAllTotal.checkCount <= 0) {
				uni.showToast({
					title: '请选择删除的商品',
					duration: 1000,
					icon: 'none',
				});
				return false;
			}
			const tips = '确认删除这' + this.storeAllTotal.checkCount + '种商品吗';
			uni.showModal({
				title: '',
				content: tips,
				success: (res) => {
					if (res.confirm) {
						this.$store.commit('deleteGoods', this.shopId);
						if (this.storeGoodsList[0].checked) {
							this.$emit('deleteGoods');
						}
					} else if (res.cancel) {
						window.console.log('用户点击取消');
					}
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.store-cart {
	padding: 0 0 50px;
}

.app-header-action {
	display: flex;
}
uni-checkbox {
	margin-right: 4rpx;
}

.module-shop {
	background: $uni-bg-color-grey;
	.shop-content {
		background: #fff;
	}

	.shop-header {
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		padding: 18rpx $uni-spacing-base;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
		font-size: $uni-font-size-base;
		z-index: 9;
	}
	.shop-product {
		padding: 90rpx $uni-spacing-base 0;
	}
	.item {
		display: flex;
		padding: 20rpx 0;
		@include borderCreator(bottom, solid, $uni-border-color-grey);

		&:last-child {
			border-bottom: none;
		}
	}

	.media-content {
		flex: 1;
		padding-left: 18rpx;
	}

	.product-content {
		display: flex;
		width: 100%;
	}

	.media-object {
		width: 90rpx;
		height: auto;
	}

	.media-title {
		margin: 0 0 $uni-spacing-sm;
		line-height: 36rpx;
		@include textEllipsis(1);
	}
	.item-price {
		position: relative;
	}

	.price-count {
		color: $uni-text-price;
		font-size: $uni-font-size-sm;
	}

	.item-number {
		float: right;
	}
	.btn-delete {
		float: right;
		color: $uni-color-error;
	}
}

.module-none {
	display: block;
	text-align: center;
	padding: 40rpx;
	color: #c8c7cc;
	font-size: 30rpx;
}
</style>
